<template>
	<view class="content">
		<view><wyb-drop-down ref="dropDown" :options="options" @select="gotoSelect"></wyb-drop-down></view>

		<view class="list" >
			<view class="item" v-for="(item,index) in list" :key="index" @click="gotoPage('/pages/index/details/details?id='+item.id)">
				<view class="item-image"><image :src="item.thumb" mode="aspectFill"></image></view>
				<view>
					<view class="item-title">{{item.name}}</view>
					<view class="item-content">{{item.model.name}}/{{item.style.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

export default {
	data() {
		return {
			options: [
				{
					header: '区域',
					selectIndex:0,
					contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
				},
				{
					header: '风格',
					selectIndex:0,
					contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
				},
				{
					header: '户型',
					selectIndex:0,
					contents: ['115m²', '120m²', '135m²', '140m²']
				}
			],
			page:1,
			limit:10,
			style:"",
			area:"",
			model:"",
			total:"",
			list:{}
		};
	},
	components: {
		wybDropDown
	},
	methods: {
		gotoPage(path){
			uni.navigateTo({
				url:path
			})
		},
		gotoSelect(e) {
			console.log(e);
			this.List = [];
			this.options[e.headerIndex].selectIndex = e.contentIndex;
			this.page = 1;
			this.goPage(true);
		},
		goPage(gotuPage){
			uni.showLoading({
				title: '加载当中'
			});
			setTimeout(
			()=>{
				uni.request({
					url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
					method: 'POST',
					data: {
						page:this.page,
						limit:this.limit,
						area:this.options[0].selectIndex,
						style:this.options[1].selectIndex,
						model:this.options[2].selectIndex
					},
					success: res => {
						console.log(res);
						if(res.data.code===200){
							this.total = res.data.data.total;
							this.list=res.data.data.list;
						this.page=res.data.data.page;
						this.limit=res.data.data.limit;
						}else{
						uni.navigateTo({
							url: '/pages/index/Real/RealHome/RealHome',
						});
					}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			gotuPage ? 0 : 400
			);
			},
			loadNextPage() {
			if (this.page < this.total / this.limit) {
				this.page++;
				this.goPage(false);
			}
		}
	},
	onLoad(e) {
		console.log(e);
		this.goPage(true);
			uni.request({
				url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
				method: 'POST',
				data: {
					page:e.page,
					limit:e.limit,
					style:e.style,
					area:e.area,
					model:e.model
				},
				success: res => {
					console.log(res);
					if(res.data.code===200){
						this.list=res.data.data.list;
					this.page=res.data.data.page;
					this.limit=res.data.data.limit;
					}else{
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
				}
				}
			});
	},
	onReachBottom() {
		this.loadNextPage();
	}
};
</script>

<style lang="less" scoped>
	/deep/ .wyb-drop-down-content-item-label{
		display: flex;
		justify-content: center !important;
		flex-direction: row;
		text-align: center !important;
		align-items: center !important;
	}
.content {
	padding-top: 96rpx;

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 22rpx;
		padding: 22rpx;

		.item {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

			.item-image {
				width: 100%;

				image {
					border-radius: 12rpx 12rpx 0 0;
					display: block;
					width: 100%;
				}
			}
			.item-title {
				font-size: 24rpx;
				margin-top: 16rpx;
				margin-left: 20rpx;
			}
			.item-content {
				font-size: 20rpx;
				color: #666666;
				margin-left: 20rpx;
				margin-bottom: 12rpx;
			}
		}
	}
}
</style>
